<template>
 <div>
     <div class="recommend-title">热销推荐</div>
     <ul>
         <router-link :to="'/detail/'+item.id" tag="li"
              class="item border-bottom" v-for="item of list" :key="item.id">
                 <img  class="item-img" :src="item.imgUrl"/>
             <div class="item-info">
                 <p class="item-title">{{item.title}}</p>
                 <p class="item-desc">{{item.desc}}</p>
                 <button class="item-button">查看详情</button>
             </div>

         </router-link>
         
     </ul>
 </div>
    
</template>

<script>
export default {
    name:'HomeRecommend',
    props:{
        list:Array
    }
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.recommend-title
    background:#eee
    line-height:40px
    text-indent:10px
    margin-top:10px
.item
    overflow :hidden
    display:flex
    height:95px
    
    .item-img
        width:85px
        height:85px
        padding:5px
    .item-info
        padding:5px
        flex:1
        min-width :0
        .item-title
            line-height :27px
            font-size:16px
            ellipsis()
            overflow :hidden
         .item-desc
            line-height :20px
            color:#ccc
            ellipsis()
            overflow :hidden
        .item-button
            background: #ff9300
            padding:5px
            border-radius:3px
            color:#fff
            margin-top:10px    
            line-height:11px

                



    


</style>
